<template>
    <section class="overflow-y-auto overflow-x-hidden scrollbar scrollbar-height">
        <el-row>
            <el-col class="relative">
                <my-image fit="cover" class="w-full blur-[40px] overflow-hidden scale-[1.1]" :src="data.cover" />
                <div class="background">
                    <span v-for="(item, index) in new Array(20)" :key="index"></span>
                </div>
                <div class="absolute top-[0] w-full text-center">
                    <ul class="relative my-[50px] flex flex-row sec h-[300px]">
                        <div
                            class="animate__animated animate__fadeInLeft outline outline-offset-0 p-10 rounded-[10%] text-[#000] w-[220px] hover:scale-110 hover:text-[#409eff]">
                            <h1 class="font-serif text-3xl font-bold shadow-xl mb-3">￥
                                <count-to :startVal="0" :endVal="Number.parseFloat(data.buyPrice)" :decimals="2"
                                    :duration="2500" />
                            </h1>
                            <h1 class="text-xl font-light shadow-xl">进价</h1>
                        </div>
                        <div
                            class="animate__animated animate__fadeInTopLeft outline outline-offset-0 p-10 rounded-[10%] text-[#000] w-[220px] hover:scale-110 hover:text-[#409eff]">
                            <h1 class="font-serif text-3xl font-bold shadow-xl mb-3">￥
                                <count-to :startVal="0" :endVal="Number.parseFloat(data.sellPrice)" :decimals="2"
                                    :duration="2500" />
                            </h1>
                            <h1 class="text-xl font-light shadow-xl">售价</h1>
                        </div>
                        <div class="animate__animated animate__slideInDown ">
                            <my-image fit="contain"
                                class="rote-image w-[250px] h-[250px] rounded-[50%] outline outline-offset-0"
                                :src="data.cover" />
                        </div>
                        <div
                            class="animate__animated animate__fadeInTopRight outline outline-offset-0 p-10 rounded-[10%] text-[#000] w-[220px] hover:scale-110 hover:text-[#409eff]">
                            <h1 class="font-serif text-3xl font-bold shadow-xl mb-3">￥
                                <count-to :startVal="0" :endVal="Number.parseFloat(data.guidePrice)" :decimals="2"
                                    :duration="2500" />
                            </h1>
                            <h1 class="text-xl font-light shadow-xl">指导价</h1>
                        </div>
                        <div
                            class="animate__animated animate__fadeInRight outline outline-offset-0 p-10 rounded-[10%] text-[#000] w-[220px] hover:scale-110 hover:text-[#409eff]">
                            <h1 class="font-serif text-3xl font-bold shadow-xl mb-3">￥
                                <count-to :startVal="0" :endVal="Number.parseFloat(data.breakPrice)" :decimals="2"
                                    :duration="2500" />
                            </h1>
                            <h1 class="text-xl font-light shadow-xl">折扣价</h1>
                        </div>
                    </ul>
                    <ul class="animate__animated animate__flipInX animate__delay-1s  flex flex-row cc text-white">
                        <li class="font-serif font-bold mt-[3px] text-black text-[30px]">
                            {{ data.name }}
                        </li>
                        <li class="bg-[#f64f59] p-[5px] rounded-[5px] text-[15px] ml-[15px]">
                            {{ data.pIp }}
                        </li>
                        <li class="bg-[#c471ed] py-[5px] px-[10px] rounded-[5px] text-[15px] ml-[15px]">
                            {{ data.categoryDesc }}
                        </li>
                        <li class="bg-[#12c2e9] py-[5px] px-[10px] rounded-[5px] text-[15px] ml-[15px]">
                            {{ data.sourceDesc }}
                        </li>
                    </ul>
                    <ul
                        class="animate__animated animate__slideInUp flex flex-1 flex-row flex-wrap mt-[70px] justify-center mx-[20%]">
                        <li v-for="(item, index) in state.images" :key="item.url">
                            <my-image fit="contain"
                                class="w-[200px] h-[200px] rounded-[50%] outline outline-offset-0 m-[20px]"
                                :src="item.url" />
                        </li>
                    </ul>
                    <div class="mt-[20px] flex flex-1 justify-center font-serif font-bold text-black">
                        <div class="w-[720px] mx-5">
                            <p class="text-[22px] mb-[15px]">入库记录</p>
                            <ul>
                                <li v-for="(item, index) in state.putRecord" :key="index"
                                    class="flex bg-[#fafafa] rounded-xl px-[20px] py-[15px] my-3 shadow-lg shadow-slate-900/50">
                                    <div>
                                        {{ dayjs(item.orderDate).format('YYYY-MM-DD HH') }}时，
                                    </div>
                                    以
                                    <div class="mx-2 text-[#ff4d4d]">
                                        ￥{{ item.price }}
                                    </div>
                                    <div class="text-white bg-slate-900 px-2 rounded-2xl">
                                        <i>购入</i>
                                    </div>
                                    <div class="mx-2">
                                        {{ item.total }}
                                    </div>
                                    (个/件/盒)
                                    <div class="ml-2">
                                        总计
                                    </div>
                                    <div class="mx-3 text-[#ff4d4d]">
                                        ￥{{ item.sum }}
                                    </div>
                                    邮费
                                    <div class="ml-2 text-blue">
                                        ￥{{ item.postage }}
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="w-[720px] mx-5">
                            <p class="text-[22px] mb-[15px]">出库记录</p>
                            <ul>
                                <li v-for="(item, index) in state.outRecord" :key="index"
                                    class="flex bg-[#fafafa] rounded-xl px-[20px] py-[15px] my-3 shadow-lg shadow-slate-900/50">
                                    <div>
                                        {{ dayjs(item.orderDate).format('YYYY-MM-DD HH') }}时，
                                    </div>
                                    以
                                    <div class="mx-2 text-[#ff4d4d]">
                                        ￥{{ item.price }}
                                    </div>
                                    <div class="text-white bg-orange-600 px-2 rounded-2xl">
                                        <i>成交</i>
                                    </div>
                                    <div class="mx-2">
                                        {{ item.total }}
                                    </div>
                                    (个/件/盒)
                                    <div class="ml-2">
                                        总计
                                    </div>
                                    <div class="mx-2 text-[#ff4d4d]">
                                        ￥{{ item.sum }}
                                    </div>
                                    邮费
                                    <div class="ml-3 text-blue">
                                        ￥{{ item.postage }}
                                    </div>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
            </el-col>
        </el-row>
    </section>
</template>

<script lang='ts' setup>
import ProductService from "@/api/ProductService";
import { useAppStore } from "@/store";
import { CountTo } from 'vue3-count-to';
import Constant from "@/common/Constant";
import Utils from "@/utils/Utils";
import { ProductImage, Stock } from "@/components/product/type";
import { dayjs } from "element-plus";

const app = useAppStore()
const router = useRouter()
const state = reactive({
    data: {
        cover: '',
        name: '',
        pIp: '',
        categoryDesc: '',
        sourceDesc: '',
        buyPrice: "0",
        sellPrice: "0",
        guidePrice: "0",
        breakPrice: "0",
    },
    images: [] as ProductImage[],
    outRecord: [] as Stock[],
    putRecord: [] as Stock[],
});

const { data } = toRefs(state)
const pageParams = router.currentRoute.value.query || ""

const loadDetail = async () => {
    const [err, res] = await ProductService.getProductById({ pId: pageParams.id })
    if (err) return Utils.Modal().msgError(err)
    state.data = res?.data || {}
    document.title = res?.data.name
    const faviconLink = document.querySelector(
        'link[rel="icon"][type="image/png"]'
    ) as HTMLLinkElement;
    let cover = res?.data?.cover || null
    if (cover) {
        cover = cover.split('.');
        (cover as String[]).splice(cover.length - 1, 0, 'th')
        cover = cover.join('.')
    }
    faviconLink.href = cover || "/favicon.png";
}

const loadImages = async () => {
    const [err, res] = await CommonService.loadImageByRefGuid({ refGuid: pageParams.id, type: 1 })
    if (err) return Utils.Modal().msgError(err)
    state.images = res.data || []
}

const loadRecord = async () => {
    const [err, res] = await ProductService.loadRecordByPId({ pId: pageParams.id })
    if (err) return Utils.Modal().msgError(err)
    const { out, put } = res?.data || {}
    state.putRecord = put || []
    state.outRecord = out || []
}

loadDetail()
loadImages()
loadRecord()
</script>

<style lang='scss' scoped>
.text-with-outline {
    color: #E5E5E5;
    font-size: 20px;
    letter-spacing: 5px;
    font-family: 'Courier New', Courier, monospace;
    /* 设置文字颜色 */
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    /* 添加描边效果 */
}

.rote-image {
    animation: rote-image 15s linear infinite;
}

@keyframes rote-image {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


.background {
    // width: 100vw;
    // height: 100vh;
    background: #3E1E68;
}

$particleSize: 20vmin;
$animationDuration: 6s;
$amount: 20;

.background span {
    width: $particleSize;
    height: $particleSize;
    border-radius: $particleSize;
    backface-visibility: hidden;
    position: absolute;
    animation-name: move;
    animation-duration: $animationDuration;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    $colors: (
        #583C87,
        #E45A84,
        #FFACAC,
        #c6ffdd,
        #fbd786,
        #f7797d,
    );

@for $i from 1 through $amount {
    &:nth-child(#{$i}) {
        color: nth($colors, random(length($colors)));
        top: random(100) * 1%;
        left: random(100) * 1%;
        animation-duration: (random($animationDuration * 10) / 10) * 1s + 10s;
        animation-delay: random(($animationDuration + 10s) * 10) / 10 * -1s;
        transform-origin: (random(50) - 25) * 1vw (random(50) - 25) * 1vh;
        $blurRadius: (
            random() + 0.5) * $particleSize * 0.5;
        $x: if(random() > 0.5, -1, 1
        );
    box-shadow: ($particleSize * 2 * $x) 0 $blurRadius currentColor;
}
}
}

@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}
</style>